<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }} </title>
    <style>
      body {
        padding: 10px;
        font: 14pt "Arial";
        margin: 10px;
      }

      p {
        color: cornsilk;
      }

      a {
        color: #fe921f;
      }

      b {
        font-size: 150%;
      }

      form {
        padding: 10px;
        margin: 5px;
      }
      input {
        padding: 5px;
        margin: 10px;
        background-color: black;
      }

      input[type=text] {
        font-size: 120%;
      }

      input[type=button] {
        background-color: #778899;
        font-size: 150%;
        padding: 20px;
        border: 1px solid gray;
      }

      input[type=button]:hover {
        border: 2px solid black;
      }

      textarea {
        padding: 20px;
        font: 14pt "Segoe UI";
      }

      .capsulemsg {
        font-size: 150%;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      function submitForm() {
        const ele = document.getElementById('itext')

        if (ele.value.length > 0) {
          window.location = '{{ posturl }}?' + encodeURIComponent(ele.value)
        } else {
          alert('Empty input')
        }
      }
    </script>

    <div class="capsulemsg" align="center">
      <p>
      The gemini capsule at <a href='{{ gemurl }}'/>{{ gemurl }}</a> sent an
      input request.
      </p>
    </div>

    <div id='reqinput' align="center">
      <b>{{ geminput }}</b>

      <form id="qform" onsubmit='event.preventDefault(); submitForm()'>
        <textarea width='60%' rows="15" cols="80" id='itext'></textarea>

        <br/>
        <input type='button' value='Send'
          onclick='event.preventDefault(); submitForm()' />
      </form>
    </div>
  </body>
</html>
